<template>
  <div class="wrap">
    <div class="title">
      <div>交易管理 </div>
      <div></div>
      <div>我的職位</div>
    </div>
    <div class="content">
      <div class="work">
        <div class="mywork">我的職位</div>
      </div>
      <div class="tiao">
        <div class="tiaoleft">
          <div>距離成為{{list.postName}}</div>
          <!-- <div><el-progress :text-inside="true" :stroke-width="50" :percentage="70"></el-progress></div> -->
          <div class="huibox">
            <div class="zibox1" v-if="wi < 10" :style="'width:'+wi+'%'"></div>
            <div class="zibox" v-if="wi >= 10" :style="'width:'+wi+'%'"></div>
            <div class="textbox">還差{{list.stageIntegral}}PV值</div>
          </div>
          <!-- <div class="wai">
            <div class="nei1" v-if="wi == 0" :style="'width:'+wi+'%'"><div>還差{{list.stageIntegral}}PV值</div></div>
            <div class="nei" v-if="wi != 0" :style="'width:'+wi+'%'"><div>還差{{list.stageIntegral}}PV值</div></div>
          </div> -->
        </div>
        <div class="tiaoright" v-if="list.describe != ''">
          <div>額外條件</div>
          <!-- <div><el-progress :text-inside="true" :stroke-width="50" :percentage="50"></el-progress></div> -->
          <div class="huibox">
            <div class="zibox1" v-if="wi1 < 10" :style="'width:'+wi1+'%'"></div>
            <div class="zibox" v-if="wi1 >= 10" :style="'width:'+wi1+'%'"></div>
            <div class="textbox">還差{{ number - list.surpDescribe}}個區域總監</div>
          </div>
          <!-- <div class="wai">
            <div class="nei2" v-if="wi1 == 0" :style="'width:'+wi1+'%'"><div>還差{{ number - list.surpDescribe}}個區域總監</div></div>
            <div class="nei" v-if="wi1 != 0" :style="'width:'+wi1+'%'"><div>還差{{ number - list.surpDescribe}}個區域總監</div></div>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
 import {mypost} from '@/api/user';
// import {validatePhoneTwo,validateEMail,validatePassword,validateReferral,validateXing,validateMonth,validateDay} from '@/utils/validate';
// import {list} from '@/api/order';
import { getToken } from '@/utils/auth' // 驗權
export default {
  data(){
    return{
     showType:0,
     number:5,
     list:{},
     wi:'',
     wi1:''
    }
  },
  mounted(){
     mypost({userId:getToken()}).then(res=>{
       console.log(res)
        this.list = res.data
        this.wi = (res.data.userPvTotal / res.data.upgrade) * 100
        this.wi1 = res.data.surpDescribe / 5 * 100
     })
  },
  methods: {

  }
}
</script>
<style scoped>
  .wrap{
    width: 100%;
    /* height: 1358px; */
    background: #F5F5F5;
    box-sizing: border-box;
    
  }
  .title{
    width: 100%;
    box-sizing: border-box;
    padding: 10px 20px 20px 20px;
    border-bottom: 1px solid #D8D8D8;
    background: #fff;
    display: flex;
    align-items: center;
    padding-bottom: 20px;
  }
  .title>div:nth-child(1){
    font-size: 19px;
    font-weight: bold;
    color: #333333;
    border-bottom: 3px solid #333333;
  }
  .title>div:nth-child(2){
    width: 8px;
    height: 2px;
    background: #333333;
    margin: 0px 10px;
  }
  .title>div:nth-child(3){
    font-size: 19px;
    font-weight: bold;
    color: #333333;
    border-bottom: 3px solid #333333;
  }
  .content{
    width: 100%;
    margin: 0 auto;
    background: #fff;

  }
  .mytitle{
    width: 100%;
    box-sizing: border-box;
    height: 70px;
    align-items: center;
    border-bottom: 1px solid #D8D8D8;
    background: #fff;
    display: flex;
    align-items: center;
  }
  .mytitle div{  
    padding:0 20px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
  }
  .work{
    width: 100%;
    background: #FFFFFF;
  }
  .mywork{
    height: 104px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #101010;
    border-bottom:1px solid #E4E4E4;
  }
  .tiao{
    width: 100%;
    height: 830px;
  }
  .tiaoleft{
    height: 400px;
  }
  .tiaoleft>div:nth-child(1){
    height: 200px;
    line-height: 330px;
    padding-left:50px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #101010;
  }
  .tiaoleft>div:nth-child(2){
    width: 88%;
    padding-left: 58px;
  }
  .tiaoright{
    height: 300px;
  }
  .tiaoright>div:nth-child(1){
    height: 100px;
    line-height: 120px;
    padding-left:50px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #101010;
  }
  .tiaoright>div:nth-child(2){
    width: 88%;
    padding-left: 58px;
  }
  .tiao>>>.el-progress-bar__inner{
    background-color: #7466FF;
  }
  .tiaoleft>>>.el-progress-bar__outer {
    background-color: #D6D6D6;
  }
  .tiaoright>>>.el-progress-bar__outer {
    background-color: #D6D6D6;
  }
  .huibox{
    height: 50px;
    background:#D6D6D6;
    margin: 0px auto;
    border-radius: 40px;
    position: relative;
    line-height: 50px;
    color: white;
  }
  .zibox1{
    position: absolute;
    height: 50px;
    left: 0px;
    top: 0px;
    background: #7466FF;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
  }
  .zibox{
    position: absolute;
    height: 50px;
    left: 0px;
    top: 0px;
    border-radius: 40px;
    background: #7466FF;
  }
  .textbox{
    position: absolute;
    left: 50%;
    top: 50%;
    line-height: 50px;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    z-index: 100;
    font-size: 16px;
  }
  .wai{
    /* width: 95%; */
    height: 50px;
    background: #D6D6D6;
    margin: 0 auto;
    border-radius: 40px;
    position: relative;
    font-size: 16px;
    line-height: 50px;
    text-align: center;
    color: white;
  }
  .wai>div>div{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
  }
  .nei{
    position: absolute;
    height: 50px;
    left: 0px;
    top: 0px;
    border-radius: 40px;
    /* border-top-left-radius: 40px;
    border-bottom-left-radius: 40px; */
    background: #7466FF;
  }
  /* .nei{
    position: absolute;
    height: 50px;
    left: 0;
    top: 0;
    border-radius: 40px;
    background: #7466FF;
    display: flex;
    justify-content: flex-end;
  } */
  .nei div{
    /* position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap; */
    /* right: -55px; */
    /* right: -100px;
    white-space: nowrap; */
    /* right: 10px; */
   
  }
   .nei1{
    position: absolute;
    height: 50px;
    left: 0;
    top: 0;
    border-radius: 40px;
    background: #7466FF;
    display: flex;
    justify-content: flex-end;
  }
  .nei1 div{
    position: absolute;
    /* right: -55px; */
    right: -135px;
    white-space: nowrap;
  }
  .nei2{
    position: absolute;
    height: 50px;
    left: 0;
    top: 0;
    border-radius: 40px;
    background: #7466FF;
    display: flex;
    justify-content: flex-end;
  }
  .nei2 div{
    position: absolute;
    /* right: -55px; */
    right: -140px;
    white-space: nowrap;
  }
</style>